<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>

		<view>
		   <view class="login_box"> 
            <view class="uni-column">
                <view class="title">登录账户:</view>
                <input class="login-input" focus placeholder="请输入用户名" />
            </view>
            <view class="uni-column">
                <view class="title">登录密码:</view>
                <input class="login-input" type="password" placeholder="请输入登录密码" />
            </view>
						   <view class="uni-column">
                <view class="title">验证码:</view>
                <input class="login-input" type="text" v-model="captcha" placeholder="请输入登录密码" />
            </view>
						   <img
                  class="captchaImg"
                  :src="captchaImg"
                  @click="getCaptchaImg"
                >
		</view>
		                   <view class="uni-list-cell-db">
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                        <view class="uni-input">{{date}}</view>
                    </picker>
                </view>
           <!-- <map id="map" ref="map" style="width:100%;height:300px" :polyline="polyline"></map> -->
					 <map :scale="scale" :latitude="latitude" :longitude="longitude"  :polyline="polyline" style="width:100%;height:300px">
             </map>

	</view>
	</view>
</template>

<script>

	export default {
		data() {
			  const currentDate = this.getDate({
            format: true
        })
			return {
				captchaImg:'',
				captcha:'',
				areaList:[],
				title: 'map',
				latitude: 40.808082,
				longitude: 116.892993,
				markers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: '../../static/l.png'
				}],
				circles: [{  
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: '../../static/l.png',
							radius: 500,  
							strokeWidth: 1,  
							color: "#428BCA88",  
							fillColor: "#B6E1F248",  
				}],
				polyline:[{
							points:[
											{longitude: 116.892993, latitude: 40.808082},
										{longitude: 116.684017, latitude: 40.982332},
										 {longitude: 116.462222, latitude: 40.986419},
										{longitude: 116.398134, latitude: 40.861415},
										 {longitude: 116.58063, latitude: 40.641526},
										{longitude: 116.386528, latitude: 40.489752},
										{longitude: 116.383278, latitude: 40.339632},
										{longitude: 116.69596, latitude: 40.245376},
										 {longitude: 116.730446, latitude: 40.452993},
										{longitude: 116.718658, latitude: 40.604902},
										{longitude: 116.892993, latitude: 40.808082}
							],
							color:'#ff0000',
							width:3,
							dottedLine:true,//是否虚线
					    arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
					}],
					 title: 'picker',
            array: ['中国', '美国', '巴西', '日本'],
            index: 0,
            date: currentDate,
            time: '12:01'
			}


		},
		onLoad() {
				// var mapContext	= uni.createMapContext('map', this);
				// mapContext.translateMarker({  
        //                 markerId:1,  
        //                 destination:{longitude:'106.55',latitude:'29.57'},  
        //                 autoRotate:true,  
        //                 rotate:150,  
        //                    duration:1000,  
        //                 animationEnd:function(){  
        //                     console.log(123)  
        //                 },  
        //                 fail(e) {  
        //                     console.log('---------------------')  
        //                 }  
        //             });
				
		},
		methods: {
      btnLogin(){
				var self = this
					self.$api.ajax({
		        	url:'/address/getAllArea',
		        	method:'GET',
		        	success:function(res){
								console.log(res);
								self.areaList =res.items;
		        	}
		      })
			},
			getCaptchaImg() {
				
         this.captchaImg = `https://test-sp-51yeyx.xiujiadian.com/api/v1/captcha/gif?v=${Math.random()}`;
			},
bindPickerChange: function(e) {
            console.log('picker发送选择改变，携带值为', e.target.value)
            this.index = e.target.value
        },
        bindDateChange: function(e) {
            this.date = e.target.value
        },
        bindTimeChange: function(e) {
            this.time = e.target.value
        },
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 100vh;
	}
	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}
 .login_box .uni-column{
	  position: relative;
    height: 100upx;
    width: 500upx;
    margin: 0 auto;
		border-bottom: 2upx solid #ccc;
 }
 .login_box .uni-column .title{
	 position: absolute;
	 left: 0;
	 font-size: 32upx;
	  width: 140upx;
   text-align: right;
	 bottom:10upx;
	 height: 60upx;
	 line-height: 60upx;
 }

.login_box .uni-column .login-input{
	 position: absolute;
	 left: 150upx;
	 font-size: 32upx;
	width: 300upx;
   text-align: left;
	 bottom:10upx;
	 height: 60upx;
	 line-height: 60upx;
	}
	.btn_login{
		width: 400upx;
		margin-top:40upx;
	}
</style>
